<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><?= $title; ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../css/dice.css" rel="stylesheet" type="text/css" />
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/mootools-1.2.4-core-server.js"></script>
<script type="text/javascript" src="../js/debug.js"></script>
<script type="text/javascript" src="../js/Risk.js"></script>
<script type="text/javascript" src="../js/wz_jsgraphics.js"></script>
<script type="text/javascript" src="../js/mapper.js"></script>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/slider.js"></script>
<script type="text/javascript" src="../js/RollDice.js"></script>
<script type="text/javascript" src="../js/chat_room.js"></script>
<script>
	var playersJSON = <?= $playersJSON ?>;
</script>
<style>
.ownedLands {
	color: gray;
	font-size: 8pt;
}
</style>

<style>
.focusDiv{
	background-image:url(../images/focusDiv.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size:100%;
	text-align:center;
	vertical-align:middle;
	width: 138px;
	height: 34px;
	z-index: 10;
	font-size:15px;
	line-height: 34px;
}
</style>

<style>
td.h1{
	background-image:url(../images/risk_logo.png);
	background-repeat:no-repeat;
	width:280px;
	height:110px;
}

.chat_time {

	font-style: italic;

	font-size: 9px;

}

</style>

<script>
/****** SHOW MAP NAME ******/
$(document).mousemove(function(e){
							   $("#focus_map_name").css("left",e.pageX-70)
							   .css("top",e.pageY-45);
							   });


$(document).ready(function(){
	$("area").click(function(){
		console.debug($(this).attr("alt"));
	}).hover(
	function(){
		$("#focus_map_name").css("visibility","visible")
		.html($(this).attr("alt"));
	},
	function(){
		$("#focus_map_name").css("visibility","hidden")
		.html("");
	});
	getChatText();
});
/****** SHOW MAP NAME ******/
</script>

<script>
/****** ROLL DICE ******/
	var sumResult=0; // Result of Rolling Dices
	
	$(document).ready(function(){
							   
		console.debug($("#mapDiv").css("z-index"));
		
		$("#roll").click(function(){
			
			showHiddenBackground();
			
			var noOfDices = $("#no_of_dices").val();
			sumResult = RollDice(noOfDices);
			
			console.debug(sumResult);
		});
		
		$("#background").click(function(){
			showBackground();
		});
		
	});
/****** ROLL DICE ******/
</script>
	
<!--Fireworks CS3 Dreamweaver CS3 target.  Created Wed Apr 28 06:04:33 GMT+0800 2010-->
</head>
<body bgcolor="#ffffff">
<div id="background" style="
	background-color:#808080;
	opacity:0.8;
	position:absolute;
	z-index:10;
	visibility:hidden">
</div>
<div>
</div>

<table>
<tr>
    <td class="h1">
    </td>
    <td id="chat_room_container" style="width:500px;height:110px">
    <div id="div_chat_small" style="height:60px; width:118px; overflow:auto; background-color: #CCCCCC; border:1px solid #555555; position:absolute; left: 15px; top: 844px;">
    </div>
    <div id="button"  style="z-index:10;position:absolute;">

        <img src="../images/chat_room_button.png" width="184" height="32" class="menu_class" />     
        
        <ul class="the_menu">
        
        <div id="chat_room" style="background-color:white;">
        	<div id="chat_room_div">
            	<font style="font-family:'Courier New', Courier, monospace;font-size:28px"> Chat Room </font>
                <div id="div_chat" style="height: 300px; width: 500px; overflow: auto; background-color: #CCCCCC; border: 1px solid #555555;">
            </div>
              <form id="frmmain" name="frmmain" onSubmit="return blockSubmit();">
    
                <input type="button" name="btn_get_chat" id="btn_get_chat" value="Refresh Chat" onClick="javascript:getChatText();" />
    
                <textarea type="text" id="txt_message" name="txt_message" cols="45" rows="5" style="resize:none"> </textarea> 
    
                <input type="button" name="btn_send_chat" id="btn_send_chat" value="Send" onClick="javascript:sendChatText();" />
    
              </form>
            </div>
        </div>
        
        </ul>
    
    </div>
    </td>
</tr>
</table>

<table id='containerTable' style="z-index:1">
<tr>
	<td>
		<div id='playerStatusDiv'>
		<? /*foreach ($players as $player): ?>

		<b></b>
		<table>
			<tr>
			<td>armies</td><td><?= $player->numberOfArmies ?></td>
			<td>lands</td><td><?= $player->numberOfLands ?></td>
			<td>cards</td><td><?= $player->numberOfCards ?></td>
			</tr>
			<tr>
			<td colspan=3 class='ownedLands'>owned lands</td>
			</tr>
		</table>

		<? endforeach; */ ?>
		</div><!-- end of div#playerStatusDiv -->
		
		<br />
		<br />
		Chat Room <br />
		<textarea readonly cols=15> not functional yet</textarea><br />
		<input type='text' name='inputBox' size=10/><input type='button' name='send' value='send' disabled size=5/>

		<br />
		<br />
		<div id='areaDiv'>
		areaDiv
		</div>
		
		<button id="roll" style="position:absolute;top:100px"> Roll </button>
		<input type="text" id="no_of_dices" width="50" style="position:absolute;top:130px" value="6"/>
		
	</td>

	<td id="map_table">
		<div align="center" id="focus_map_name" style="position:absolute; font:Arial, Helvetica, sans-serif; visibility:hidden" class="focusDiv"></div>
		<div id='mapDiv'>
			<img name="index" src="<?= $map->imageSrc ?>" width="1024" height="771" border="0" id="index" usemap="#m_index" alt="" />

			<?= $map->htmlString ?>

		</div><!-- end of div#mapDiv -->
	</td>


</tr>
</table><!-- end of table#containerTable -->

<!-- For chat room and optional contents -->
<table id="chat_room_table">
	<tr>
    	<td>
 			
    </td>
        <td id="optional_contain_container">
        
        </td> 
</table>

</body>
